<script>
// import getPro from "../api/productserver";
import { statcUrl } from "../api/api";
export default {
  props: ["dataList"],
  data() {
    return {
      statcUrl,
    };
  },
};
</script>

<template>
  <div class="home-product">
    <router-link
      :to="'/detail/' + item.id"
      v-for="item in dataList"
      :key="item.id"
    >
      <img :src="statcUrl + '/' + item.img.split(',')[0]" />
      <h3>{{ item.title }}</h3>
      <span class="span-left"
        >￥{{ (item.price * item.discount).toFixed(2) }} &nbsp;</span
      >
      <span class="discount"
        ><del>{{ item.price }}</del></span
      >
    </router-link>
  </div>
</template>

<style lang="scss">
.home-product {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  text-align: left;
  margin-top: 0.28rem;
  a:nth-child(odd) {
    margin-right: 0.22rem;
  }
  a {
    display: block;
    flex: 0 0 calc(50% - 0.11rem);
    margin-bottom: 0.22rem;
    border: 1px solid #ebebeb;
    color: #333;
    padding-bottom: 0.24rem;
    h3 {
      font-size: 0.28rem;
      margin-left: 0.22rem;
      font-weight: 400;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0.33rem;
      margin-top: 0.3rem;
    }
    .discount {
      color: #333;
    }
    span {
      color: #fc5051;
      font-size: 0.28rem;
    }
    img {
      width: 100%;
    }
  }
}
</style>
